<!--
  - Copyright (c) 2018.
  - 北京九思金信科技有限公司对该文件内容保留所有权利。
  - 未经许可，不得私自拷贝、传播、发布、引用该文件内容，违者将被追究法律责任。
  -->
  <template>
  <div class="InfoTask_box">
    <div class="InfoTask_title">
      <div class="InfoTask_title_return">
        <img src="@/assets/img/Back@3x.png" alt>
        <span>信息</span>
      </div>
      <p>{{title}}</p>
    </div>
    <div class="InfoTask_search">
      <div class="search_box">
        <img src="@/assets/img/Search@3x.png" alt>
        <input type="text" placeholder="搜索" maxlength="20">
      </div>
      <i></i>
    </div>
    <div v-if="searchlist" class="InfoTask_list">
      <div class="InfoTask_list_item" v-for="item in searchlist" :key="item.id">
        <div class="InfoTask_list_item_img">
          <img :src="item.img" alt>
        </div>
        <div class="InfoTask_list_item_info">
          <p>{{item.title}}</p>
          <div class="stylefont">{{item.info}}</div>
          <div class="styletime">{{item.time}}</div>
        </div>
      </div>
    </div>
    <div v-else class="InfoTask_none_list">没有搜索到任何关于“消息标题”的消息</div>
  </div>
</template>
  
  <script>
export default {
  data() {
    return {
      title: "任务通知",
      searchlist: [
        {
          title: "消息标题",
          info: "消息描述内容文案，",
          img: require("@/assets/img/SystemSetting@3x.png"),
          time: "09:43:34"
        },
        {
          title: "消息标题",
          info: "消息描述内容文案，",
          img: require("@/assets/img/SystemSetting@3x.png"),
          time: "09:43:34"
        },
        {
          title: "消息标题",
          info: "消息描述内容文案，",
          img: require("@/assets/img/SystemSetting@3x.png"),
          time: "09:43:34"
        },
        {
          title: "消息标题",
          info: "消息描述内容文案，",
          img: require("@/assets/img/SystemSetting@3x.png"),
          time: "09:43:34"
        },
        {
          title: "消息标题",
          info: "消息描述内容文案，",
          img: require("@/assets/img/SystemSetting@3x.png"),
          time: "09:43:34"
        }
      ]
    };
  }
};
</script>
  
  <style scoped lang="less">
.InfoTask_box {
  height: 100%;
  // background: #ffffff;
  .InfoTask_title {
    width: 100%;
    height: 0.44rem;
    text-align: center;
    line-height: 0.44rem;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    .InfoTask_title_return {
      margin-top: -0.04rem;
      float: left;
      img {
        // width: 0.15rem;
        height: 0.205rem;
        padding-left: 0.085rem;
      }
      span {
        font-family: Regular;
        font-size: 0.17rem;
        color: #3e3e3e;
        letter-spacing: -0.41px;
        line-height: 0.22rem;
      }
    }
    p {
      font-family: Semibold;
      font-size: 0.17rem;
      color: #3e3e3e;
      letter-spacing: -0.41px;
      text-align: center;
      height: 0.44rem;
      line-height: 0.44rem;
      margin-left: 0.7rem;
      margin-right: 0.7rem;
    }
  }
  .InfoTask_search {
    height: 0.44rem;
    width: 100%;
    background: #ffffff;
    box-shadow: inset 0 -1px 0 0 rgba(207, 207, 207, 0.2);
    position: relative;
    overflow: hidden;
    .search_box {
      // width: 100%;
      position: absolute;
      top: 0rem;
      left: 0rem;
      width: 100%;
      img {
        width: 0.17rem;
        position: absolute;
        left: 0.28rem;
        top: 0.14rem;
      }
      input {
        // padding: 0.1rem 0;
        // width: 100%;
        padding-left: 0.3rem;
        height: 0.32rem;
        background: rgba(89, 89, 89, 0.09);
        font-family: Regular;
        font-size: 0.14rem;
        color: #909090;
        letter-spacing: -0.34px;
        line-height: 0.14rem;
        margin-top: -0.1rem;
        margin-left: 0.16rem;
        width: 100%;
      }
    }
    i {
      display: block;
      height: 0.44rem;
      width: 0.16rem;
      line-height: 0.44rem;
      text-align: center;
      position: absolute;
      top: 0rem;
      right: 0rem;
      background: #ffffff;
    }
  }
  .InfoTask_list {
    margin: 0rem 0.16rem;
    .InfoTask_list_item {
      height: 0.84rem;
      padding-left: 0.16rem;
      padding-right: 0.16rem;
      margin-top: 0.1rem;
      background: #ffffff;
      border-radius: 4px;
      border-bottom: 1px rgba(207, 207, 207, 0.2) solid;
      .InfoTask_list_item_img {
        float: left;
        width: 0.24rem;
        height: 100%;
        margin-right: 0.16rem;
        img {
          height: 0.24rem;
        }
      }
      .InfoTask_list_item_info {
        // float: left;
        p {
          padding-top: 0.06rem;
          font-family: Mediums;
          font-size: 0.15rem;
          color: #202f1f;
          letter-spacing: -0.41px;
        }
        .stylefont {
          font-family: Mediums;
          font-size: 0.15rem;
          color: #636363;
          letter-spacing: -0.41px;
        }
        .styletime {
          font-family: Regular;
          font-size: 0.13rem;
          color: #adadad;
          letter-spacing: -0.36px;
        }
      }
    }
    .InfoTask_list_item::after {
      content: "";
      background: #28ab77;
      width: 0.04rem;
      height: 0.16rem;
      display: block;
      float: right;
      margin-right: -0.16rem;
      margin-top: -0.4rem;
    }
  }
  .InfoTask_none_list {
    font-family: Regular;
    font-size: 0.13rem;
    color: rgba(0, 22, 22, 0.8);
    letter-spacing: 0;
    text-align: center;
    margin-top: 30%;
  }
}
</style>